<template>
  <div class="qyxx_box">
    <div class="qyxx">
      <div class="head_clos">
        <h2>{{$store.state.xiugaiflag!=''?'编辑':'添加等级'}}</h2>
        <span>
          <a-icon class="close" @click="close" type="close" />
        </span>
      </div>
      <div class="qyxx_inp">
        <ul>
          <!-- <li>
            <span class="inp_tit">等级ID：</span>
            <a-input style="width:500px" type="text" disabled placeholder="0001" />
          </li>-->
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span> 等级名称：
            </span>
            <a-input v-model="djinpvalue" style="width:500px" type="text" placeholder="等级名称" />
          </li>
          <li>
            <span class="inp_tit">图标：</span>
            <!-- 开始 上传产品图 -->
            <!-- <span>上传产品图：</span> -->
            <div class="clearfix">
              <a-radio-group @change="vipdjChange" v-model="vipimgvalue">

                <a-radio :value="1">
                  <img class="vipimg" src="../../img/1.png" alt />
                </a-radio>
                <a-radio :value="2" >
                  <img class="vipimg" src="../../img/2.png" alt />
                </a-radio>

                <a-radio :value="3">
                  <img class="vipimg" src="../../img/3.png" alt />
                </a-radio>
                <a-radio :value="4">
                  <img class="vipimg" src="../../img/4.png" alt />
                </a-radio>
                <a-radio :value="5">
                  <img class="vipimg" src="../../img/5.png" alt />
                </a-radio>
                <a-radio :value="6">
                  <img class="vipimg" src="../../img/6.png" alt />
                </a-radio>
              </a-radio-group>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <!-- 结束 上传产品图 -->
          </li>
          <li>
            <span class="inp_tit">默认等级：</span>
            <a-radio-group @change="djChange" v-model="djvalue">
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>
          </li>
          <li>
            <span class="inp_tit">允许寄售库存：</span>
            <a-radio-group @change="jsChange" v-model="jsvalue">
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>
          </li>
           <li>
            <span class="inp_tit">允许下单：</span>
            <a-radio-group @change="xdChange" v-model="xdvalue">
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>
          </li>
          <!-- <li>
            <span class="inp_tit">价格折扣：</span>
            <a-input-number :min="1" :max="100" v-model="zkvalue" @change="zkChange" />%
          </li>
          <li>
            <span class="inp_tit">价格查看权限：</span>
            <a-radio-group @change="jgckChange" v-model="jgckvalue">
                <a-radio value="否">否</a-radio>
              <a-radio value="是">是</a-radio>
            
            </a-radio-group>
          </li> -->
          <li class="foot_btn">
            <a-button type="primary" @click="adddjsub">确认提交</a-button>
            <a-button @click="close">取消</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      //图标----开始
      previewVisible: false,
      previewImage: "",
      //图标----结束
      djinpvalue:
        this.$store.state.xiugaiflag != ""
          ? this.$parent.hydjlist.gradeName
          : "",
      vipimgvalue: null,
      djvalue:
        this.$store.state.xiugaiflag != ""
          ? this.$parent.hydjlist.defaultGrade
          : "否",
      //  jsvalue:this.$store.state.xiugaiflag != ""
      //     ? this.$parent.hydjlist.consign
      //     : "否",
             jsvalue: "否",
      zkvalue:
        this.$store.state.xiugaiflag != ""
          ? this.$parent.hydjlist.priceDiscount
          : 0,
      jgckvalue:
        this.$store.state.xiugaiflag != ""
          ? this.$parent.hydjlist.priceView
          : "否",
          xdvalue:'是'
          
    };
  },
  components: {},
  methods: {
    //------结束 上传产品图
    //图标----开始
    handleCancel() {
      this.previewVisible = false;
    },
    //图标----结束
    //---------一系列change-------------------------
    vipdjChange(e) {
      console.log("radio checked", e.target.value);
      console.log(this.vipimgvalue);
    },
    djChange(e) {
      console.log("radio checked", e.target.value);
    },
     jsChange(e) {
      console.log("radio checked", e.target.value);
    },
     xdChange(e) {
      console.log("radio checked", e.target.value);
    },
    zkChange(value) {
      console.log("changed", value);
    },
    jgckChange(e) {
      console.log("radio checked", e.target.value);
    },
    adddjsub() {
      if (this.djinpvalue != "") {
        if (this.$store.state.xiugaiflag == "") {
          //添加
          this.axios
            .post(
              "huiyuan/memberLevelAdd.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                gradeName: this.djinpvalue,
                icon: this.vipimgvalue + ".png",
                defaultGrade: this.djvalue,
                consign:this.jsvalue,
                orderAction:this.xdvalue
               // priceDiscount: this.zkvalue,
               // priceView: this.jgckvalue
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.$parent.handleChangelist(this.$parent.pagination);
                this.$store.state.tjwz = false;
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
              }
            });
        }else{
          //修改
           this.axios
          .post(
            "huiyuan/memberLevelEdit.php",
            qs.stringify({
              id_num:this.$parent.hydjlist.id_num,
              sqdwid: this.$store.state.bbl_sqdwid,
              gradeName: this.djinpvalue,
              icon: this.vipimgvalue + ".png",
              defaultGrade: this.djvalue,
              consign:this.jsvalue,
                orderAction:this.xdvalue

             // priceDiscount: this.zkvalue,
             // priceView: this.jgckvalue
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$parent.handleChangelist(this.$parent.pagination)
              this.$store.state.tjwz = false;
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
        }
      }else{
          this.$notification["error"]({
                message: "失败",
                description: "等级名称不能为空！"
              });
      }
    },
    //------------一系列change----------------------
    close() {
      this.$store.state.tjwz = false;
    }
  },

  created() {


  console.log('this.$parent.hydjlist.consign',this.jsvalue)
  console.log(this.$parent.hydjlist)
    if (this.$store.state.xiugaiflag != "") {
      this.vipimgvalue = Number(this.$parent.hydjlist.Icon.split(".")[0]);
      this.jsvalue=this.$parent.hydjlist.consign.trim()
      this.xdvalue=this.$parent.hydjlist.orderAction.trim()
    }
  }
};
</script>

<style lang='less' scoped>
.qyxx_box {
  .qyxx {
    width: 66%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    text-align: left;
    padding: 20px;
    .head_clos {
      display: flex;
      justify-content: space-between;
      .close {
        font-size: 20px;
      }
    }
    .qyxx_inp {
      ul {
        li {
          margin: 20px 0;
          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;
          }

          //上传图片
          .clearfix {
            width: 80%;
            display: inline-block;
            vertical-align: middle;
            .vipimg {
              width: 50px;
              height: 50px;
            }
            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }
          ant-upload.ant-upload-select-picture-card :hover {
            border-color: #40a9ff !important;
          }

          /* you can make up upload button and sample style by using stylesheets */
          .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
          }

          .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
          }
        }
        .foot_btn {
          width: 60%;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
}
</style>
